var myScroll;
var items_per_page = 4;
var scroll_in_progress = false;
var pullDownEl;
var pullDownOffset;
var pullUpEl;
var str='<div class="list">'+
                    '<div class="img" style="background-image:url(image/home-list0.jpg);"></div>'+
                    '<div class="body">'+
                        '<div class="title"> 公益接力:寻找乡村小学的老课桌</div>'+
                        '<div class="desc">这些老课桌，记录了几代人求学的刻苦与艰辛也承载了几代人的童年和故事它们并没有因为它们并没有因为</div>'+
                        '<div class="time">2017-07-17 | 黥东南州青鸟助学会</div>'+
                    '</div>'+
                    '</div>';
var str1='1111111';

function load_content(refresh,next_page){
    setTimeout(function(){
        if(!refresh){
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);            
        }else if(refresh && next_page){
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
            $('#wrapper > #scroller > .lists').append(str);
        }
        if (refresh) {              
            myScroll.refresh();
            pullActionCallback();
            
        } else {
            if (myScroll) {
                myScroll.destroy();
                $(myScroll.scroller).attr('style', ''); // Required since the styles applied by IScroll might conflict with transitions of parent layers.
                myScroll = null;
            }
            trigger_myScroll();
        
        }
    },1000)
}
function pullUpAction(callback) {
    if ($('#wrapper > #scroller > .lists').data('page')) {
        var next_page = parseInt($('#wrapper > #scroller > .lists').data('page'), 10) + 1;
    } else {
        var next_page = 2;
    }
    load_content('refresh', next_page);
    $('#wrapper > #scroller > .lists').data('page', next_page);
    
    if (callback) {
        callback();
    }
}
function pullActionCallback() {
    if (pullDownEl && pullDownEl.className.match('loading')) {
        
        pullDownEl.className = 'pullDown';
        
        myScroll.scrollTo(0, parseInt(pullUpOffset)*(-1), 200);
        
    } else if (pullUpEl && pullUpEl.className.match('loading')) {
        
        $('.pullUp').removeClass('loading').html('');
        
    }
}
var pullActionDetect = {
    count:0,
    limit:10,
    check:function(count) {
        if (count) {
            pullActionDetect.count = 0;
        }
        // Detects whether the momentum has stopped, and if it has reached the end - 200px of the scroller - it trigger the pullUpAction
        setTimeout(function() {
            if (myScroll.y <= (myScroll.maxScrollY + 200) && pullUpEl && !pullUpEl.className.match('loading')) {
                $('.pullUp').addClass('loading').html('<span class="pullUpIcon">&nbsp;</span><span class="pullUpLabel">Loading...</span>');
                pullUpAction();
            } else if (pullActionDetect.count < pullActionDetect.limit) {
                pullActionDetect.check();
                pullActionDetect.count++;
            }
        }, 200);
    }
}
function trigger_myScroll(offset) {
    pullDownEl = document.querySelector('#wrapper .pullDown');
    if (pullDownEl) {
        pullDownOffset = pullDownEl.offsetHeight;
    } else {
        pullDownOffset = 0;
    }
    pullUpEl = document.querySelector('#wrapper .pullUp');	
    if (pullUpEl) {
        var pullUpOffset = pullUpEl.offsetHeight;
    } else {
        pullUpOffset = 0;
    }
    
    if ($('#wrapper .lists > .list').length < items_per_page) {
        $('#wrapper .pullDown').hide();
        $('#wrapper .pullUp span').hide();
        offset = 0;
    } else if (!offset) {
        // If we have more than 1 page of results and offset is not manually defined - we set it to be the pullUpOffset.
        offset = pullUpOffset;
    }
    
    myScroll = new IScroll('#wrapper', {
        probeType:1, tap:true, click:false, preventDefaultException:{tagName:/.*/}, mouseWheel:true, scrollbars:true, fadeScrollbars:true, interactiveScrollbars:false, keyBindings:false,
        deceleration:0.0002,
        startY:(parseInt(offset)*(-1))
    });
    
    myScroll.on('scrollStart', function () {
        scroll_in_progress = true;
    });
    
    myScroll.on('scroll', function () {
        scroll_in_progress = true;

        if ($('#wrapper .lists > .list').length >= items_per_page) {
            if (this.y >= 5 && pullDownEl && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'pullDown flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh';
                this.minScrollY = 0;
            } else if (this.y <= 5 && pullDownEl && pullDownEl.className.match('flip')) {
                pullDownEl.className = 'pullDown';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh';
                this.minScrollY = -pullDownOffset;
            }
            
            console.log(this.y+1);
            pullActionDetect.check(0);
            
        }
    });

    myScroll.on('scrollEnd', function () {
        console.log('scroll ended');
        setTimeout(function() {
            scroll_in_progress = false;
        }, 100);
        if ($('#wrapper .lists > .list').length >= items_per_page) {
            if (pullDownEl && pullDownEl.className.match('flip')) {
                pullDownEl.className = 'pullDown loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Loading...';
                pullDownAction();
            }
            // We let the momentum scroll finish, and if reached the end - loading the next page
            pullActionDetect.check(0);
        }
    });
    
    // In order to prevent seeing the "pull down to refresh" before the iScoll is trigger - the wrapper is located at left:-9999px and returned to left:0 after the iScoll is initiated
    setTimeout(function() {
        $('#wrapper').css({left:0});
    }, 100);
}
function loaded(){  
    load_content();
}
window.addEventListener("DOMContentLoaded",loaded,false);
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);